<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Iframe Content</title>
  </head>
  <style>
    html,
    body {
      margin: 0px;
      padding: 0px;
      height: 100%;
      width: 100%;
    }
    img {
      height: 100% !important;
      width: 100% !important;
      cursor: pointer; /* Add cursor style to indicate it's clickable */
      border-radius: 8px !important;
    }
  </style>
  <body>
    <img id="image" src="" alt="" />

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 添加监听消息的事件
        window.addEventListener("message", function (event) {
          if (event.data && event.data.type === "updateImageUrl") {
            // console.log(event.data.imageUrl, "event.data.imageUrl");
            // 更新img标签的src
            console.log(event,'---');
            document.getElementById("image").src = event.data.imageUrl;
          }
        });
        // 添加双击事件监听器
        var imageElement = document.getElementById("image");
        var isFullScreen = false;
        // 添加监听消息的事件
        window.addEventListener("message", function (event) {
          if (
            event.data &&
            event.data.type === "updateFullscreen" &&
            event.data.updateFullscreen
          ) {
            imageElement.requestFullscreen();
            isFullScreen = false;
          }
        });

        imageElement.addEventListener("dblclick", function () {
          if (!isFullScreen) {
            // 进入全屏模式
            if (imageElement.requestFullscreen) {
              imageElement.requestFullscreen();
            } else if (imageElement.mozRequestFullScreen) {
              imageElement.mozRequestFullScreen();
            } else if (imageElement.webkitRequestFullscreen) {
              imageElement.webkitRequestFullscreen();
            } else if (imageElement.msRequestFullscreen) {
              imageElement.msRequestFullscreen();
            }
          } else {
            // 退出全屏模式
            if (document.exitFullscreen) {
              document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
              document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
              document.msExitFullscreen();
            }
          }
        });
        // 监听全屏状态变化
        document.addEventListener("fullscreenchange", function () {
          isFullScreen = !isFullScreen;
        });
      });
    </script>
  </body>
</html>
